<template>
    <view class="disabled-service-page">
        <!-- 顶部导航栏 -->
        <NavBar :title="'开办运输企业一件事'" />
        <!-- 位置信息 -->
        <view class="location-bar">
            <view class="location-icon">📍</view>
            <text class="location-text">所属区划: 拉萨市</text>
        </view>

        <!-- 在线填表部分 -->
        <view class="section-header">
            <view class="section-number">1</view>
            <text class="section-title">在线填表</text>
        </view>
        <view class="section">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">申请人信息</text>
            </view>
            <view class="form-items">
                <view
                    class="form-item"
                    v-for="(item, index) in formItems"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">申请道路货物运输经营许可证信息</text>
            </view>
            <view class="form-items">
                <view
                    class="form-item"
                    v-for="(item, index) in licenseList"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">申请普通道路货物运输车辆《道路运输证》</text>
            </view>
            <view class="form-items">
                <view
                    class="form-item"
                    v-for="(item, index) in transportPermitList"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <!-- 资料上传部分 -->
        <view class="section-header">
            <view class="section-number">2</view>
            <text class="section-title">资料上传</text>
        </view>
        <view class="section">
            <!-- 联办表 -->
            <view class="form-item" @click="handleUploadClick('business')">
                <view class="item-content">
                    <text class="item-title">企业营业执照</text>
                    <text class="item-subtitle">点击完成资料上传</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">中华人民共和国居民身份证</text>
            </view>
            <view>
                <view
                    class="form-item"
                    v-for="(item, index) in idCardItems"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">车辆信息提交资料-已购置车辆</text>
            </view>
            <view>
                <view
                    class="form-item"
                    v-for="(item, index) in carInfoList"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">车辆信息提交资料-拟购置车辆</text>
            </view>
            <view class="form-item" @click="handleUploadClick('subsidies')">
                <view class="item-content">
                    <text class="item-title">拟投入运输车辆承诺书</text>
                    <text class="item-subtitle">点击右侧完成信息填写</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">驾驶员信息-已聘用驾驶员</text>
            </view>
            <view>
                <view
                    class="form-item"
                    v-for="(item, index) in driverList"
                    :key="index"
                    @click="handleUploadClick(item.code)"
                >
                    <view class="item-content">
                        <text class="item-title">{{ item.title }}</text>
                        <text class="item-subtitle">{{ item.subtitle }}</text>
                    </view>
                    <text class="arrow">›</text>
                </view>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">驾驶员信息-拟聘用驾驶员</text>
            </view>
            <view class="form-item" @click="handleUploadClick('employInfo')">
                <view class="item-content">
                    <text class="item-title">拟聘用驾驶员信息表</text>
                    <text class="item-subtitle">点击右侧完成信息填写</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <view class="section section-top">
            <view class="form-item" @click="handleUploadClick('safetyManagement')">
                <view class="item-content">
                    <text class="item-title">安全生产管理制度文本</text>
                    <text class="item-subtitle">点击右侧完成信息填写</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <view class="section section-top">
            <view class="group-header">
                <view class="group-icon">👤</view>
                <text class="group-title">个体工商户需提交</text>
            </view>
            <view class="form-item" @click="handleUploadClick('safetyLetter')">
                <view class="item-content">
                    <text class="item-title">安全运营承诺书</text>
                    <text class="item-subtitle">点击右侧完成信息填写</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <view class="section section-top">
            <view class="form-item" @click="handleUploadClick('roadTransportLicense')">
                <view class="item-content">
                    <text class="item-title">道路运输经营许可证</text>
                    <text class="item-subtitle">点击右侧完成信息填写</text>
                </view>
                <text class="arrow">›</text>
            </view>
        </view>
        <!-- 提交按钮 -->
        <view class="submit-section">
            <button class="submit-btn" @click="handleSubmit">提交</button>
        </view>
    </view>
</template>

<script>
export default {
    name: 'DisabledServicePage',
    data() {
        return {
            formItems: [
                {
                    code: 'baseInfo',
                    title: '申请人信息',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'legal',
                    title: '法定代表人',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'operator',
                    title: '经办人信息',
                    subtitle: '点击右侧完成信息填写'
                }
            ],
            licenseList: [
                {
                    code: 'applyingEnterprise',
                    title: '申请企业信息',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'businessScope',
                    title: '经营范围',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'proposedPurchase',
                    title: '拟购置车辆信息',
                    subtitle: '点击完成资料上传'
                }
            ],
            transportPermitList: [
                {
                    code: 'transportInfo',
                    title: '基本信息',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'vehicleBusinessScope',
                    title: '经营范围',
                    subtitle: '点击右侧完成信息填写'
                }
            ],
            idCardItems: [
                {
                    code: 'principalIdCard',
                    title: '法定代表人（负责人）身份证',
                    subtitle: '点击完成资料上传'
                },
                {
                    code: 'operatorIdCard',
                    title: '经办人身份证*委托书',
                    subtitle: '点击完成资料上传'
                }
            ],
            carInfoList: [
                {
                    code: 'vehicleLicense',
                    title: '机动车行驶证',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'vehicleOwnership',
                    title: '机动车登记证书',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'ownership',
                    title: '道路运输车辆达标核查记录表，或车辆转籍、过户证明（转籍、过户车辆提供）',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'inspectionReport',
                    title: '机动车安全技术检验报告（含车辆技术等级）',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'Positioning',
                    title: '车辆卫星定位信息（总质量为12吨及以上车辆提供',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'anglePhoto',
                    title: '车辆前方45度角照片',
                    subtitle: '点击右侧完成信息填写'
                }
            ],
            driverList: [
                {
                    code: 'pilotInfo',
                    title: '聘用驾驶员信息表',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'pilotLicense',
                    title: '驾驶员机动车驾驶证',
                    subtitle: '点击右侧完成信息填写'
                },
                {
                    code: 'practiceCertificate',
                    title: '驾驶员从业资格证',
                    subtitle: '点击右侧完成信息填写'
                }
            ]
        };
    },
    methods: {
        handleBack() {
            uni.navigateBack();
        },
        handleUploadClick(item) {
            console.log('点击上传项目:', item);
            uni.navigateTo({
                url: `/pages/fromTable/transport/${item}`
            });
        },
        handleSubmit() {
            console.log('提交申请');
            // 这里可以添加提交逻辑
        }
    }
};
</script>

<style scoped>
.disabled-service-page {
    background: #ecf1f5;
    min-height: 100vh;
}

.location-bar {
    background: #ffe3c8;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff7b00;
    font-size: 14px;
}

.location-icon {
    font-size: 16px;
}

.section {
    margin: 0 32rpx;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.section-top {
    margin-top: 16px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24rpx 40rpx;
}

.section-number {
    width: 40rpx;
    height: 40rpx;
    background: #ff7b00;
    color: #ffffff;
    border-radius: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c5e9f;
}

.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 8px 16px;
}

.group-icon {
    font-size: 32rpx;
    color: #2c5e9f;
}

.group-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #2c5e9f;
}

.form-items {
    padding: 0;
}

.form-item {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #f0f0f0;
    background: #f1f8ff;
    cursor: pointer;
    margin: 8px 12px;
}

.form-item:last-child {
    border-bottom: none;
}

.form-item:hover {
    background: #f8f9fa;
}

.item-content {
    flex: 1;
}
.item-sub {
    padding: 8px 12px;
    flex: 1;
}

.item-title {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 4px;
}

.item-subtitle {
    display: block;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

.arrow {
    font-size: 20px;
    color: #999;
    font-weight: bold;
}
.item-arrow {
    margin-right: 4%;
}

.submit-section {
    padding: 20px;
    margin-top: 20px;
    background: #ffffff;
}

.submit-btn {
    width: 100%;
    height: 48px;
    background: #2c5e9f;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.submit-btn:hover {
    background: #1e4a8a;
}
</style>
